<template>
  <div class="app-container2 ziyuanjiankong_wrap">
    <div class="top_search">
      <div class="search_item">
        <div class="name">序号/设备:</div>
        <div class="search_info">
          <el-input
            class="js_common_input"
            v-model="inpVal1"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="search_item">
        <div class="name">设备类型:</div>
        <div class="search_info">
          <el-select
            class="js_common_select"
            v-model="inpVal2"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in selectOptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search_item">
        <div class="name">网络状态:</div>
        <div class="search_info">
          <el-select
            class="js_common_select"
            v-model="inpVal3"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in selectOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-button class="js_common_btn">查询</el-button>
      </div>
    </div>
    <div class="btm_main">
      <div class="main_table">
        <el-table
          class="jk_common_table001"
          :data="tableData"
          height="style"
          style="width: 100%; height: 100%"
        >

          <el-table-column type="index" label="序号" width="55">
          </el-table-column>

          <el-table-column prop="name" label="设备名称" align="center">
          </el-table-column>
          <el-table-column prop="code" label="设备编码" align="center">
          </el-table-column>
          
          <el-table-column prop="type" label="设备类型" align="center">
          </el-table-column>
          <el-table-column
            prop="ip"
            label="IP"
            align="center"
          ></el-table-column>

          <el-table-column label="网络状态" align="center">
            <template slot-scope="scope">
              <div class="table_box_status">
                <div
                  :class="['icon', getstatusClassFn(scope.row.status)]"
                ></div>
                <div class="name">{{ scope.row.status }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="CPU核数/使用频率"
            align="center"
            width="190px"
          >
            <template slot-scope="scope">
              <div class="table_box_use">
                <div class="use_wrap">
                  <div class="use_info">
                    <div
                      :class="[
                        'use_tiao',
                        getstatusTiaoClassFn(scope.row.heZb),
                      ]"
                      :style="{ width: scope.row.heZb }"
                    ></div>
                    <div class="use_tiao_text">{{ scope.row.heNum }}/30</div>
                  </div>
                </div>
                <div class="use_text">{{ scope.row.heZb }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="内存空间/使用率" align="center" width="190px">
            <template slot-scope="scope">
              <div class="table_box_use">
                <div class="use_wrap">
                  <div class="use_info">
                    <div
                      :class="[
                        'use_tiao',
                        getstatusTiaoClassFn(scope.row.neicunZb),
                      ]"
                      :style="{ width: scope.row.neicunZb }"
                    ></div>
                    <div class="use_tiao_text">
                      {{ scope.row.neicunNum }}/100GB
                    </div>
                  </div>
                </div>
                <div class="use_text">{{ scope.row.neicunZb }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="硬盘空间/使用率" align="center" width="190px">
            <template slot-scope="scope">
              <div class="table_box_use">
                <div class="use_wrap">
                  <div class="use_info">
                    <div
                      :class="[
                        'use_tiao',
                        getstatusTiaoClassFn(scope.row.yingpanZb),
                      ]"
                      :style="{ width: scope.row.yingpanZb }"
                    ></div>
                    <div class="use_tiao_text">
                      {{ scope.row.yingpanNum }}/100T
                    </div>
                  </div>
                </div>
                <div class="use_text">{{ scope.row.yingpanZb }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="table_caozuo_btn" @click="onShowDialogFn(scope.row)">
                详情
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_fenye">
        <el-pagination
          class="js_common_fenyeqi"
          :current-page="1"
          :page-size="10"
          :pager-count="5"
          :append-to-body="false"
          popper-class="js_common_fenyeqi_popper"
          layout="prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="服务器详情"
      :visible.sync="dialogVisible1"
      width="60%"
      custom-class="jk_common_dialog01"
      :show-close="false"
    >
      <div class="dialog_center">
        <div class="dialog_center_top">
          <div class="top_left_wrap">
            <div class="top_left_table">
              <el-table
                class="jk_common_table002"
                :data="tableData2.slice(0, 4)"
                style="width: 100%; height: 100%"
                height="style"
              >
                <el-table-column
                  v-if="dialogTableTableNameFn()"
                  prop="name"
                  label="软件进程"
                  align="center"
                ></el-table-column>
                <el-table-column
                  v-if="!dialogTableTableNameFn()"
                  label="板卡序号/名称"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="table_box1">
                      <div>NO.{{ scope.row.id }}</div>
                      <div>{{ scope.row.name2 }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="网络状态" align="center">
                  <template slot-scope="scope">
                    <div class="table_box_status">
                      <div
                        :class="['icon', getstatusClassFn(scope.row.status)]"
                      ></div>
                      <div class="name">{{ scope.row.status }}</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="top_left_fenye">
              <el-pagination
                class="js_common_fenyeqi"
                :current-page="1"
                :page-size="4"
                :pager-count="5"
                :append-to-body="false"
                popper-class="js_common_fenyeqi_popper"
                layout=" prev, pager, next"
                :total="400"
              >
              </el-pagination>
            </div>
          </div>
          <div class="top_right_wrap">
            <div class="right_tabbar_list">
              <div
                :class="['tabbar_item', actTabbarName === item.id && 'act']"
                v-for="item in tabbarList"
                :key="item.id"
                @click="changeTabbarItemFn(item)"
              >
                <div>{{ item.name }}</div>
              </div>
            </div>
            <div class="top_right_content">
              <div class="info">
                <div class="info_item">
                  <div class="name">{{ actTabbarItem.useTitle1 }}</div>
                  <div class="num">{{ actTabbarItem.useNum1 }}</div>
                </div>
                <div class="info_item">
                  <div class="name">{{ actTabbarItem.useTitle2 }}</div>
                  <div class="num">{{ actTabbarItem.useNum2 }}</div>
                </div>
                <div class="info_item">
                  <div class="name">{{ actTabbarItem.useTitle3 }}</div>
                  <div class="num">{{ actTabbarItem.useNum3 }}</div>
                </div>
              </div>
              <div class="charts_box">
                <lineCharts />
              </div>
            </div>
          </div>
        </div>
        <div class="dialog_center_btm">
          <div class="dialog_center_btm_title">服务器资源总览</div>
          <div class="echarts_wrap">
            <div class="echarts_item">
              <div class="echarts_main">
                <pieCharts :echartsData="peiChartsData1" />
              </div>
              <div class="echarts_text">1核/10核</div>
            </div>
            <div class="echarts_item">
              <div class="echarts_main">
                <pieCharts :echartsData="peiChartsData2" />
              </div>
              <div class="echarts_text">1GB/10GB</div>
            </div>
            <div class="echarts_item">
              <div class="echarts_main">
                <pieCharts :echartsData="peiChartsData3" />
              </div>
              <div class="echarts_text">1T/10T</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="btns_wrap">
          <div class="sure_btn" @click="dialogVisible1 = false">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pieCharts from "./components/pieCharts.vue";
import lineCharts from "./components/lineCharts.vue";
export default {
  data() {
    return {
      inpVal1: "",
      inpVal2: "",
      selectOptions1: [
        {
          value: "选项1",
          label: "通讯服务器",
        },
        {
          value: "选项2",
          label: "历史服务器",
        },
        {
          value: "选项3",
          label: "计算服务器",
        },
        {
          value: "选项4",
          label: "控制站",
        },
        {
          value: "选项5",
          label: "操作员站",
        },
      ],
      inpVal3: "",
      selectOptions2: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "异常",
        },
        {
          value: "选项3",
          label: "离线",
        },
      ],
      tableData: [
        {
          id: "2111",
          name: "通讯服务器A",
          code: "SYSSSER01001",
          ip: "192.168.71.171",
          time: "16.5日",
          type: "通讯服务器",
          status: "正常",
          heNum: 20,
          heZb: "45.22%",
          neicunNum: "20.2",
          neicunZb: "92.22%",
          yingpanNum: "22.2",
          yingpanZb: "32.22%",
          runTime: "16.5日",
        },
        {
          id: "2112",
          name: "通讯服务器B",
          code: "SYSSSER01004",
          ip: "192.168.71.172",
          time: "16.5日",
          type: "通讯服务器",
          status: "异常",
          heNum: 20,
          heZb: "70.22%",
          neicunNum: "20.2",
          neicunZb: "82.22%",
          yingpanNum: "22.2",
          yingpanZb: "42.22%",
          runTime: "16日",
        },
        {
          id: "2113",
          name: "操作员站1",
          code: "SYSOWP021",
          ip: "192.168.72.21",
          time: "16.5日",
          type: "操作员站",
          status: "离线",
          heNum: 20,
          heZb: "80.22%",
          neicunNum: "20.2",
          neicunZb: "72.22%",
          yingpanNum: "22.2",
          yingpanZb: "52.22%",
          runTime: "20日",
        },
        {
          id: "2114",
          name: "操作员站2",
          code: "SYSOWP022",
          ip: "192.168.72.22",
          time: "16.5日",
          type: "操作员站",
          status: "正常",
          heNum: 20,
          heZb: "50.22%",
          neicunNum: "20.2",
          neicunZb: "62.22%",
          yingpanNum: "2.2",
          yingpanZb: "62.22%",
          runTime: "33日",
        },
        {
          id: "2115",
          name: "计算服务器1",
          code: "SYSSSER01002",
          ip: "192.168.71.173",
          time: "16.5日",
          type: "计算服务器",
          status: "异常",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "52.22%",
          yingpanNum: "22.2",
          yingpanZb: "72.22%",
          runTime: "24日",
        },
        {
          id: "2116",
          name: "历史服务器1",
          code: "SYSSSER01003",
          ip: "192.168.71.174",
          time: "16.5日",
          type: "历史服务器",
          status: "正常",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "42.22%",
          yingpanNum: "22.2",
          yingpanZb: "82.22%",
          runTime: "11日",
        },
        {
          id: "2117",
          name: "历史服务器2",
          code: "SYSSSER01005",
          ip: "192.168.71.175",
          time: "16.5日",
          type: "历史服务器",
          status: "异常",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "32.22%",
          yingpanNum: "22.2",
          yingpanZb: "92.22%",
          runTime: "26.5日",
        },
        {
          id: "2118",
          name: "操作员站3",
          code: "SYSOWP023",
          ip: "192.168.72.23",
          time: "16.5日",
          type: "操作员站",
          status: "正常",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "22.22%",
          yingpanNum: "22.2",
          yingpanZb: "22.22%",
          runTime: "36.5日",
        },
        {
          id: "2119",
          name: "控制站1",
          code: "SYSMCP01010",
          ip: "172.16.10.18",
          time: "16.5日",
          type: "控制站",
          status: "正常",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "22.22%",
          yingpanNum: "22.2",
          yingpanZb: "22.22%",
          runTime: "6.5日",
        },
        {
          id: "2120",
          name: "控制站2",
          code: "SYSMCP01011",
          ip: "172.16.10.19",
          time: "16.5日",
          type: "控制站",
          status: "离线",
          heNum: 20,
          heZb: "20.22%",
          neicunNum: "20.2",
          neicunZb: "22.22%",
          yingpanNum: "22.2",
          yingpanZb: "22.22%",
          runTime: "5日",
        },
      ],
      tableData2: [
        {
          id: "01",
          name: "软件001",
          name2: "ND2111",
          status: "正常",
        },
        {
          id: "02",
          name: "软件002",
          name2: "ND2112",
          status: "离线",
        },
        {
          id: "03",
          name: "软件003",
          name2: "ND2113",
          status: "正常",
        },
        {
          id: "04",
          name: "软件004",
          name2: "ND2114",
          status: "异常",
        },
        {
          id: "05",
          name: "软件005",
          name2: "ND2115",
          status: "正常",
        },
        {
          id: "06",
          name: "软件006",
          name2: "ND211",
          status: "异常",
        },
        {
          id: "07",
          name: "软件007",
          name2: "ND211",
          status: "正常",
        },
        {
          id: "08",
          name: "软件008",
          name2: "ND211",
          status: "离线",
        },
        {
          id: "09",
          name: "软件009",
          name2: "ND211",
          status: "正常",
        },
      ],
      tabbarList: [
        {
          id: "tab1",
          name: "CPU",
          useTitle1: "使用总核",
          useNum1: "10",
          useTitle2: "当前使用",
          useNum2: "10",
          useTitle3: "平均使用率",
          useNum3: "90%",
        },
        {
          id: "tab2",
          name: "内存",
          useTitle1: "使用容量",
          useNum1: "1T",
          useTitle2: "当前使用",
          useNum2: "10GB",
          useTitle3: "平均使用率",
          useNum3: "90%",
        },
        {
          id: "tab3",
          name: "硬盘",
          useTitle1: "使用容量",
          useNum1: "100M",
          useTitle2: "当前使用",
          useNum2: "10M",
          useTitle3: "平均使用率",
          useNum3: "90%",
        },
      ],
      currentTableRowItemObj: null,
      actTabbarName: null,
      actTabbarItem: null,
      dialogVisible1: false,
      peiChartsData1: {
        value: 56,
        name: "CPU ",
      },
      peiChartsData2: {
        value: 82,
        name: "内存 ",
      },
      peiChartsData3: {
        value: 66,
        name: "硬盘 ",
      },
    };
  },
  components: { pieCharts, lineCharts },
  created() {
    this.actTabbarName = "tab1";
    this.actTabbarItem = this.tabbarList[0];
  },
  methods: {
    getstatusClassFn(status) {
      if (status === "正常") {
        return "zc";
      } else if (status === "异常") {
        return "yc";
      }
    },
    getstatusTiaoClassFn(num) {
      let newNum = parseFloat(num);
      if (newNum <= 50) {
        return "zc";
      } else if (newNum > 50 && newNum < 80) {
        return "yc";
      } else if (newNum >= 80) {
        return "wx";
      }
    },
    onShowDialogFn(item) {
      this.currentTableRowItemObj = item;
      this.dialogVisible1 = true;
    },
    dialogTableTableNameFn() {
      if (this.currentTableRowItemObj?.type === "服务器") {
        return true;
      } else {
        return false;
      }
    },
    changeTabbarItemFn(item) {
      this.actTabbarName = item.id;
      this.actTabbarItem = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.ziyuanjiankong_wrap {
  border: 1px solid #233b5c;
  background: linear-gradient(to bottom, #0a1f3d, #113468);
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 14px 20px 0;
  .top_search {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    .search_item {
      display: flex;
      align-items: center;
      .name {
        flex: 0 0 auto;
        margin-right: 10px;
      }
      .js_common_btn {
        margin-left: 30px;
      }
    }
  }
  .btm_main {
    height: 0;
    flex: 1 1 auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .main_table {
      width: 100%;
      height: 0;
      flex: 1 1 auto;
      background-color: #0d2447;
    }
    .main_fenye {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 16px 0;
    }
  }
  .table_box_status {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #7d7e7f;
      margin-right: 5px;
      &.zc {
        background-color: #52ab35;
      }
      &.yc {
        background-color: #e2912d;
      }
    }
  }
  .table_box_use {
    display: flex;
    align-items: center;
    justify-content: center;
    .use_wrap {
      flex: 0 0 auto;
      height: 30px;
      box-sizing: border-box;
      border: 1px solid #3474ba;
      display: flex;
      align-items: center;
      .use_info {
        margin: 0 6px;
        width: 80px;
        background-color: #184486;
        position: relative;
        .use_tiao {
          height: 16px;
          line-height: 16px;
          text-align: center;
          &.zc {
            background: linear-gradient(to right, #1f5aa8, #29b9e3);
          }
          &.yc {
            background: linear-gradient(to right, #d98e30, #d98e30);
          }
          &.wx {
            background: linear-gradient(to right, #b51d22, #b51d22);
          }
        }
        .use_tiao_text {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          font-size: 14px;
          height: 16px;
          line-height: 16px;
        }
      }
    }
    .use_text {
      flex: 0 0 auto;
      margin-left: 10px;
    }
  }
  .table_caozuo_btn {
    cursor: pointer;
    color: #387bb6;
    &:hover {
      text-decoration: underline;
    }
  }
}
.dialog_center {
  color: #fff;
  .dialog_center_top {
    display: flex;
    justify-content: space-between;
    .top_left_wrap {
      width: 48%;
      background-color: #164485;
      display: flex;
      flex-direction: column;
      .top_left_table {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
      }
      .top_left_fenye {
        flex: 0 0 auto;
        margin: 12px 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .top_right_wrap {
      width: 49%;
      background-color: #164485;
      .right_tabbar_list {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #194480;
        background: linear-gradient(to right, #163d71, #185a85, #163d71);
        .tabbar_item {
          height: 100%;
          flex: 1 1 auto;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          box-sizing: border-box;
          padding-bottom: 2px;
          font-weight: 700;
          cursor: pointer;
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 7px;
            border-top: 1px solid #2cbae4;
            border-bottom: 1px solid #2cbae4;
            bottom: 0;
            left: 0;
            right: 0;
          }
          &.act,
          &:hover {
            &::after {
              background-color: #2cbae4;
            }
          }
        }
      }
      .top_right_content {
        width: 100%;
        height: 228px;
        box-sizing: border-box;
        border: 1px solid #194480;
        display: flex;
        align-items: center;
        .info {
          width: 30%;
          height: 92%;
          box-sizing: border-box;
          border-right: 1px solid #2cbae4;
          box-sizing: border-box;
          padding: 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .info_item {
            text-align: center;
            font-size: 16px;
            line-height: 24px;
            margin-top: 8px;
            &:first-child {
              margin-top: 0;
            }
          }
        }
        .charts_box {
          width: 70%;
          height: 92%;
        }
      }
    }
  }
  .dialog_center_btm {
    width: 100%;
    margin-top: 8px;
    .dialog_center_btm_title {
      font-size: 14px;
      line-height: 24px;
    }
    .echarts_wrap {
      width: 100%;
      background: #14417c;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
      .echarts_item {
        width: 32%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .echarts_main {
          width: 100%;
          height: 200px;
        }
        .echarts_text {
          font-size: 14px;
          line-height: 20px;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
